<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>家政服务订单管理</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }

        .order-card {
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .order-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .status-tag {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
        }

        .countdown {
            color: #ff6b6b;
            font-weight: 500;
        }

        .tab-active {
            color: #4f46e5;
            position: relative;
        }

        .tab-active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #4f46e5;
            border-radius: 2px;
        }

        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }

        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }

        .cancel-btn {
            transition: all 0.2s ease;
        }

        .cancel-btn:hover {
            background-color: #f3f4f6;
            color: #ef4444;
        }

        .hide-scrollbar {
            scrollbar-width: none;
        }

        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body class="pb-20">
    <!-- 顶部导航 -->
    <div class="bg-white sticky top-0 z-10 shadow-sm">
        <div class="p-4">
            <h1 class="text-xl font-bold text-center">订单管理</h1>

            <!-- 状态筛选 -->
            <div class="flex overflow-x-auto py-3 hide-scrollbar">
                <div class="flex space-x-2">
                    <button
                        class="px-3 py-1 bg-indigo-600 text-white rounded-full text-sm whitespace-nowrap">待签合同</button>
                    <button class="px-3 py-1 bg-gray-100 rounded-full text-sm whitespace-nowrap">待服务</button>
                    <button class="px-3 py-1 bg-gray-100 rounded-full text-sm whitespace-nowrap">服务中</button>
                    <button class="px-3 py-1 bg-gray-100 rounded-full text-sm whitespace-nowrap">已完成</button>
                    <button class="px-3 py-1 bg-gray-100 rounded-full text-sm whitespace-nowrap">已取消</button>
                </div>
            </div>

            <!-- 时间筛选 -->
            <div class="flex overflow-x-auto hide-scrollbar">
                <div class="flex space-x-2">
                    <button
                        class="px-3 py-1 bg-indigo-600 text-white rounded-full text-sm whitespace-nowrap">今日</button>
                    <button class="px-3 py-1 bg-gray-100 rounded-full text-sm whitespace-nowrap">本周</button>
                    <button class="px-3 py-1 bg-gray-100 rounded-full text-sm whitespace-nowrap">本月</button>
                    <button class="px-3 py-1 bg-gray-100 rounded-full text-sm whitespace-nowrap">全部</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单列表 -->
    <div class="px-4 space-y-4">
        <!-- 待签合同订单 -->
        <div class="bg-white rounded-lg order-card p-4">
            <div class="flex justify-between items-start mb-2">
                <div>
                    <span class="text-gray-500 text-sm">订单编号: #20240522001</span>
                    <span class="status-tag bg-orange-100 text-orange-800 ml-2">待签合同</span>
                </div>
                <div class="text-sm text-gray-500">等待签约</div>
            </div>

            <div class="mb-3">
                <h3 class="font-medium">月嫂服务 - 26天</h3>
                <p class="text-gray-600 text-sm">2024-06-20 09:00 开始</p>
            </div>

            <div class="mb-3">
                <p class="text-gray-600 text-sm flex items-center">
                    <i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i>
                    北京市朝阳区望京SOHO T3座1205室
                </p>
            </div>

            <div class="flex justify-between items-center mb-3">
                <div>
                    <p class="text-sm">雇主: 陈女士</p>
                    <p class="text-sm text-gray-500">135****6789</p>
                </div>
                <button class="text-indigo-600 text-sm flex items-center">
                    <i class="fas fa-phone-alt mr-1"></i>联系雇主
                </button>
            </div>

            <div class="mb-3 p-3 bg-blue-50 rounded-lg">
                <p class="text-sm text-blue-700">
                    <i class="fas fa-info-circle mr-1"></i>
                    请与雇主协商服务细节并签署服务合同，合同签署后订单将进入待服务状态
                </p>
            </div>

            <div class="flex space-x-2">
                <button class="cancel-btn flex-1 py-2 bg-gray-100 rounded text-sm"
                    onclick="cancelOrder('20240522001')">取消订单</button>
                <button class="flex-1 py-2 bg-indigo-600 text-white rounded text-sm"
                    onclick="signContract('20240522001')">签署合同</button>
            </div>
        </div>

        <!-- 待服务订单 -->
        <div class="bg-white rounded-lg order-card p-4">
            <div class="flex justify-between items-start mb-2">
                <div>
                    <span class="text-gray-500 text-sm">订单编号: #20240521001</span>
                    <span class="status-tag bg-yellow-100 text-yellow-800 ml-2">待服务</span>
                </div>
                <div class="countdown text-sm">剩余2小时30分</div>
            </div>

            <div class="mb-3">
                <h3 class="font-medium">日常保洁 - 3小时</h3>
                <p class="text-gray-600 text-sm">2024-05-21 14:00-17:00</p>
            </div>

            <div class="mb-3">
                <p class="text-gray-600 text-sm flex items-center">
                    <i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i>
                    北京市朝阳区建国路88号SOHO现代城A座2103室
                </p>
            </div>

            <div class="flex justify-between items-center mb-3">
                <div>
                    <p class="text-sm">雇主: 张女士</p>
                    <p class="text-sm text-gray-500">138****1234</p>
                </div>
                <button class="text-indigo-600 text-sm flex items-center">
                    <i class="fas fa-phone-alt mr-1"></i>联系雇主
                </button>
            </div>

            <div class="flex space-x-2">
                <button class="flex-1 py-2 bg-gray-100 rounded text-sm">导航</button>
                <button class="flex-1 py-2 bg-indigo-600 text-white rounded text-sm">开始服务</button>
            </div>
        </div>

        <!-- 服务中订单 -->
        <div class="bg-white rounded-lg order-card p-4">
            <div class="flex justify-between items-start mb-2">
                <div>
                    <span class="text-gray-500 text-sm">订单编号: #20240520003</span>
                    <span class="status-tag bg-blue-100 text-blue-800 ml-2">服务中</span>
                </div>
            </div>

            <div class="mb-3">
                <h3 class="font-medium">深度保洁 - 4小时</h3>
                <p class="text-gray-600 text-sm">2024-05-20 09:00-13:00</p>
            </div>

            <div class="mb-3">
                <p class="text-gray-600 text-sm flex items-center">
                    <i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i>
                    北京市海淀区中关村南大街5号院3号楼1502
                </p>
            </div>

            <div class="flex justify-between items-center mb-3">
                <div>
                    <p class="text-sm">雇主: 李先生</p>
                    <p class="text-sm text-gray-500">139****5678</p>
                </div>
                <button class="text-indigo-600 text-sm flex items-center">
                    <i class="fas fa-phone-alt mr-1"></i>联系雇主
                </button>
            </div>

            <div class="flex space-x-2">
                <button class="flex-1 py-2 bg-gray-100 rounded text-sm">延长服务</button>
                <button class="flex-1 py-2 bg-green-500 text-white rounded text-sm">完成服务</button>
            </div>
        </div>

        <!-- 已完成订单 -->
        <div class="bg-white rounded-lg order-card p-4">
            <div class="flex justify-between items-start mb-2">
                <div>
                    <span class="text-gray-500 text-sm">订单编号: #20240518002</span>
                    <span class="status-tag bg-green-100 text-green-800 ml-2">已完成</span>
                </div>
                <div class="flex items-center text-yellow-400">
                    <i class="fas fa-star"></i>
                    <span class="ml-1 text-sm">5.0</span>
                </div>
            </div>

            <div class="mb-3">
                <h3 class="font-medium">家电清洗 - 空调</h3>
                <p class="text-gray-600 text-sm">2024-05-18 10:00-12:00</p>
            </div>

            <div class="mb-3">
                <p class="text-gray-600 text-sm flex items-center">
                    <i class="fas fa-map-marker-alt text-indigo-500 mr-1"></i>
                    北京市西城区金融大街15号鑫茂大厦北楼802
                </p>
            </div>

            <div class="flex justify-between items-center mb-3">
                <div>
                    <p class="text-sm">雇主: 王女士</p>
                    <p class="text-sm text-gray-500">136****9012</p>
                </div>
                <button class="text-indigo-600 text-sm flex items-center">
                    <i class="fas fa-phone-alt mr-1"></i>联系雇主
                </button>
            </div>

            <div class="flex space-x-2">
                <button class="flex-1 py-2 bg-gray-100 rounded text-sm">查看评价</button>
                <button class="flex-1 py-2 bg-indigo-600 text-white rounded text-sm">再次预约</button>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div
        class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2 max-w-750 mx-auto">
        <a href="aunt-home.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-home text-lg mb-1"></i>
            <span>首页</span>
        </a>
        <a href="order-grab.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-bolt text-lg mb-1"></i>
            <span>抢单</span>
        </a>
        <a href="aunt-orders.html" class="nav-tab active flex flex-col items-center px-4 py-1 text-xs">
            <i class="fas fa-clipboard-list text-lg mb-1"></i>
            <span>订单</span>
        </a>
        <a href="member-center.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-user text-lg mb-1"></i>
            <span>我的</span>
        </a>
    </div>

    <script>
        // 状态筛选切换
        document.querySelectorAll('.flex.space-x-2 button').forEach(btn => {
            btn.addEventListener('click', function () {
                // 移除同组所有按钮的选中状态
                this.parentNode.querySelectorAll('button').forEach(b => {
                    b.classList.remove('bg-indigo-600', 'text-white');
                    b.classList.add('bg-gray-100');
                });

                // 添加当前按钮的选中状态
                this.classList.remove('bg-gray-100');
                this.classList.add('bg-indigo-600', 'text-white');

                // 这里可以添加筛选逻辑
                console.log('筛选条件变化:', this.textContent.trim());
            });
        });

        // 模拟倒计时
        function updateCountdown() {
            const countdownEl = document.querySelector('.countdown');
            if (countdownEl) {
                // 这里可以添加真实的倒计时逻辑
                // 现在只是模拟
                countdownEl.textContent = '剩余2小时29分';
            }
        }

        setInterval(updateCountdown, 60000);

        // 取消订单功能
        function cancelOrder(orderId) {
            // 跳转到阿姨端取消订单页面
            window.location.href = `order-cancel.html?orderId=${orderId}`;
        }

        // 签署合同功能
        function signContract(orderId) {
            if (confirm('确认已与雇主协商完毕并准备签署合同？')) {
                // 这里应该跳转到合同签署页面或调用相关API
                alert('正在跳转到合同签署页面...');
                // 实际应用中应该跳转到合同页面
                // window.location.href = `contract-sign.html?orderId=${orderId}`;
            }
        }
    </script>
</body>

</html>